<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script>
		window.onload = function(){
			//放大镜 进阶版  
			//在鼠标划入的时候 在图片上出来smallCursor用来选取部分小图片
			var smallImg = document.getElementById("smallImg");
			var smallCursor = document.getElementById("smallCursor");
			var bigImg = document.getElementById("bigImg");
			var bigCursor = document.getElementById("bigCursor");
			//大小图的比例 用来 bigCursor 显示使用
			var p = bigImg.offsetWidth/smallImg.offsetWidth;
			//先通过比例求取 smallCursor的大小
			smallCursor.style.height = smallCursor.style.width = bigCursor.offsetWidth/bigImg.offsetWidth*smallImg.offsetWidth + "px";
			smallImg.onmouseenter = function(){
				smallCursor.style.display = "block";
				};
			smallImg.onmousemove = function(e){
				var e = e || event;
				//smallCursor 不能超出 smallImg 的边框
				smallCursor.style.left = Math.max(0, Math.min(e.clientX - smallImg.offsetLeft - smallCursor.offsetWidth/2,smallImg.offsetWidth - smallCursor.offsetWidth )) + "px";
				smallCursor.style.top =Math.min(smallImg.offsetHeight - smallCursor.offsetHeight, Math.max(e.clientY - smallImg.offsetTop - smallCursor.offsetHeight/2, 0 )) + "px";
				//大小图显示呈反比例
				bigImg.style.left = -smallCursor.offsetLeft*p + "px";
				bigImg.style.top = -smallCursor.offsetTop*p + "px";
			};
			smallImg.onmouseleave = function(){
				smallCursor.style.display = "none";
			};
			
			
			
		}
	</script> 
	<body>
		<div id="smallImg" style="position: absolute; background:url(img/星际穿越.jpg) center; background-size: cover; top: 100px; left:100px; width:200px; height:200px;">
			<div id="smallCursor" style="position: absolute; left: 0; top: 0; display:none; width: 40px; height: 40px; background: rgba(200,198,255,0.8);"></div>
		</div>
		<div id="bigCursor" style="position: absolute; height:300px; width:300px; left: 350px; top: 10px; background: rgba(200,198,255,0.1); overflow: hidden;">
			<img id="bigImg" style="position: absolute; left: 0px; top: 0px;" src="img/星际穿越.jpg"/>
		</div>
	</body>

</html>